<smart-editor #editor (change)="onChange()" [fields]="fields" [values]="canvas.page"></smart-editor>

<button (click)="sizeVisible=true" [nzType]="'primary'" nz-button>常见尺寸</button>
<nz-modal (nzOnCancel)="sizeVisible=false" [(nzVisible)]="sizeVisible" nzFooter=" " nzTitle="选择尺寸">
    <ng-container *nzModalContent>
        <nz-list>
            <nz-list-item (click)="selectSize(b)" *ngFor="let b of sizes">
                <span>{{ b.name || '' }} </span>
                {{ b.width }} x {{ b.height }}
            </nz-list-item>
        </nz-list>
    </ng-container>
</nz-modal>


<button (click)="backgroundVisible=true" [nzType]="'primary'" nz-button>背景库</button>
<nz-modal (nzOnCancel)="backgroundVisible=false" [(nzVisible)]="backgroundVisible" nzFooter=" " nzTitle="选择背景">
    <ng-container *nzModalContent>
        <div class="backgrounds">
            <div (click)="selectBackground(b)" *ngFor="let b of backgrounds" class="background">
                <img [alt]="b.name" [src]="b.thumbnail || b.url" [title]="b.name">
            </div>
        </div>
    </ng-container>
</nz-modal>
